<template>
  <title-container
    v-if="question"
    :id="question.outId"
    :index="index"
    :total="total"
    :error="error"
    :question="question"
  >
    <div class="c-forced-descriptions">
      <div
        v-for="(descriptions, index) in question.questionContent.content"
        :key="index"
        class="c-forced-desc-wrapper"
      >
        <span
          v-for="description in descriptions"
          :key="description"
          class="c-forced-description"
        >
          {{ description }}
        </span>
      </div>
    </div>
    <div class="c-forced-second-description">
      {{ question.questionContent.desc }}
    </div>
    <div class="c-forced-slider-wrapper">
      <forced-slider
        v-model="current"
        :min="0"
        :max="question.questionContent.level.length"
        :tips="question.questionContent.level"
        :active="current"
        @change="change"
      />
    </div>
  </title-container>
</template>

<script>
import TitleContainer from '@/components/titleContainer'
import ForcedSlider from '@/components/forcedSlider'
export default {
  name: 'ForcedChoice',
  components: {
    TitleContainer,
    ForcedSlider
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default: null
    },
    error: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      current: 0
    }
  },
  created() {
    // console.log('single ')

    this.question.requiredFlag = this.question.requiredFlag === undefined ? true : this.question.requiredFlag
    this.question.questionTag = this.question.questionTag || []
    const tag = '迫选题'

    this.question.questionTag.unshift(tag)
    this.current = this.question.questionContent.level.length / 2
  },
  methods: {
    change(index) {
      if (index >= 0 && index < this.question.questionContent.level.length) {
        this.submit(index)
      }
    },
    submit(idx) {
      // console.log('submit')
      const index = this.index
      // 拼接选中的选项
      const result = []
      result.push({ index: idx, content: this.question.questionContent.level[idx] })

      // 要求为必填时，必须选择一项
      if (this.question.requiredFlag && result.length === 0) {
        return false
      }
      const answer = {
        surveyId: this.question.surveyId,
        outId: this.question.outId,
        questionType: this.question.questionType,
        result: result
      }
      // console.log('暴露给父组件', answer, index)
      this.$emit('complete', answer, index)
    }
  },
}
</script>

<style scoped lang="less">
.c-forced-descriptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .c-forced-desc-wrapper:first-child{
      margin-right: 28px;
  }
  .c-forced-desc-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    width: 329px;
    min-height: 184px;
    padding-left: 15px;

    font-size: 14px;
    line-height: 24px;

    color: rgba(102, 102, 102, 0.8);
    font-weight: normal;

    background-color: rgba(165, 165, 165, 0.1);

    &:before {
      display: inline-block;
      position: absolute;
      content: '';
      width: 3px;
      height: 13px;
      left: 1px;
      top: 15px;
      background-color: rgba(1, 85, 225, 1);
    }
    .c-forced-description:first-of-type {
        margin-top: 10px;
      color: #333333;
      font-family: "PingFang SC", serif;
      font-weight: bold;
    }
  }
}
.c-forced-second-description {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 16px;
    color: #333333;
    font-weight: 500;
}
.c-forced-slider-wrapper {
  margin-top: 27px;
}
</style>
